<template>
  <div class="login-container">

    <div class="login-box">

      <login-header />

      <el-tabs v-model="activeName">

        <el-tab-pane label="重设密码" name="mobile">

          <el-form ref="postForm" :model="postForm" :rules="loginRules">

            <el-form-item prop="mobile">
              <el-input
                v-model="postForm.mobile"
                style="width: 100%"
                placeholder="手机号码"
                prefix-icon="el-icon-mobile"
              />
            </el-form-item>

            <el-form-item prop="smsCode">
              <sms-input v-model="postForm.smsCode" :mobile="postForm.mobile" />
            </el-form-item>

            <el-form-item prop="newPassword">
              <el-input
                v-model="postForm.newPassword"
                show-password
                style="width: 100%"
                placeholder="新密码"
                type="password"
                prefix-icon="el-icon-lock"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" :loading="loading" style="width: 100%" @click.native.prevent="handleReset">重设密码</el-button>
            </el-form-item>

          </el-form>

        </el-tab-pane>
      </el-tabs>


      <div>
        <div style="display: flex">
          <div style="text-align: left; flex-grow: 1">
            <el-link type="primary"  href="/#/login">已有账号？</el-link>
          </div>

          <div style="text-align: right; flex-grow: 1">
            <el-link type="default" href="/#/register">注册账号</el-link>
          </div>
        </div>
      </div>

    </div>

    <div class="footer" v-html="siteData.copyRight" />

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { isMobile } from '@/utils/validate'
import SmsInput from '@/views/login/components/sms-input'
import LoginHeader from '@/views/login/components/login-header'
import { resetPass } from '@/api/user'

export default {
  components: { LoginHeader, SmsInput },
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号码格式不正确！'))
      } else {
        callback()
      }
    }

    return {
      activeName: 'mobile',
      postForm: {
        mobile: '',
        smsCode: '',
        newPassword: ''
      },
      loginRules: {
        mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
        smsCode: [{ required: true, trigger: 'blur', message: '手机验证码不能为空！' }],
        newPassword: [{ required: true, trigger: 'blur', message: '新密码不能为空！' }]
      },
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },

  methods: {

    handleReset() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true

          resetPass(this.postForm).then(()=>{
            this.$message.success('密码重置成功！')
            this.loading = false
          })
            .catch(() => {
              this.loading = false
            })
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/login.scss";
</style>
